@import '@/app/styles/variables';

.back_button {
  all: unset;
  cursor: pointer;
  color: #ABABAB;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;

  svg {
    transform: scale(1) rotate(90turn);
  }

  &:hover {
    color: #7D7D7D;

    svg path {
      stroke: #7D7D7D;
    }
  }

  &:active {
    color: #7D7D7D;

    svg path {
      stroke: #7D7D7D;
    }
  }
}

@include media(sm) {
  .back_button {
    font-size: 14px;
    line-height: 20px;
    justify-content: flex-start;
    align-items: center;
    transform: translateX(-10%);
  }

  .back_button span {
    transform: translateX(-10%);
    margin-top: 0px;
  }

  .back_button svg {
    transform: scale(0.75) rotate(90turn);
  }
}